<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>一企过年 一解乡愁——我为家乡代盐</title>
    <meta name="description" content="关注京东企业购，瓜分1000万京豆！">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="dist/swiper-4.4.6/swiper.min.css">
    <link rel="stylesheet" href="dist/swiper-4.4.6/animate.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/myAnimate.css">
    <style>
        .sanm{ display: none; }
    </style>
<div class="sanm">
    <img src="images/pic300.jpg">
</div>
</head>

<body>


<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide stop-swiping">
            <img class="bg" src="images/page1.png"/>
            <img class="bg ani" src="images/page1.1.png" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
                 swiper-animate-delay="1.2s"/>
            <img class="tit" src="images/title.png"/>
            <img class="jumpToP2 next" src="images/xunzhaonianwei.png"/>
        </div>
        <div class="swiper-slide stop-swiping">
            <div class="bg ani" swiper-animate-effect="zoomBigOut" swiper-animate-duration="3s" swiper-animate-delay="8s">
                <img class="bg" src="images/page2_1.png"/>
            </div>
            <div class="bg ani" swiper-animate-effect="fadeOut" swiper-animate-duration="2.5s" swiper-animate-delay="6s">
                <img class="bg ani" src="images/page2.png" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s"/>
                <img class="chat1 ani" src="images/chat1.png" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s"/>
                <img class="chat2 ani" src="images/chat2.png" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.6s"/>
                <img class="chat3 ani" src="images/chat3.png" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s"/>
                <img class="chat4 ani" src="images/chat4.png" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="3.2s"/>
                <img class="chat4_1 ani" src="images/chat4_1.png" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4s"/>
            </div>
            <div class="bg ani" swiper-animate-effect="zoomSmallIn" swiper-animate-duration="5s" swiper-animate-delay="11s">
                <img class="bg" src="images/page3.png"/>
            </div>
        </div>
      <div class="swiper-slide stop-swiping">
            <div class="bg ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0s">
                <img class="tit" src="images/title.png"/>

                <div class="mapContain">
                    <img class="map" onfocus="this.blur()" id="map" src="images/huadong.png" alt="mapArea" usemap="#mapArea" draggable="false"/>
                    <map name="mapArea" id="mapArea">
                        <area onfocus="this.blur()" class="dongbei" href="javascript:;" shape="poly" coords="274,12,298,7,320,31,349,42,366,36,366,63,354,66,362,84,304,131,308,115,295,127,280,109,306,93,290,73,297,67,296,57,303,47,302,23,276,21"/>
                        <area onfocus="this.blur()" class="huabei" href="javascript:;" shape="poly" coords="276,23,300,29,301,43,289,75,301,93,281,106,292,129,232,170,232,135,218,145,206,147,205,134,196,147,184,143,187,135,171,138,145,101,192,111,229,104,239,83,279,64,257,58,260,42,271,40"/>
                        <area onfocus="this.blur()" class="xibei" href="javascript:;" shape="poly" coords="234,183,230,142,182,150,143,102,116,76,119,64,100,42,43,91,10,95,19,152,87,148,90,160,132,192,146,179,156,190,177,179,193,189,224,195"/>
                        <area onfocus="this.blur()" class="xinan" href="javascript:;" shape="poly" coords="197,270,203,264,192,254,228,244,219,211,219,205,229,202,223,197,192,192,178,183,156,192,145,185,131,197,88,166,84,152,19,156,21,167,16,178,81,223,88,219,101,229,119,233,146,226,150,244,142,259,170,286,174,275"/>
                        <area onfocus="this.blur()" class="huazhong" href="javascript:;" shape="poly" coords="236,171,260,157,268,171,265,186,273,206,259,215,260,247,240,253,237,244,229,246,224,210,234,203,227,197"/>
                        <area onfocus="this.blur()" class="huadong" href="javascript:;" shape="poly" coords="263,155,284,137,291,143,300,138,313,141,296,163,318,194,310,201,320,204,309,236,286,265,263,249,263,220,276,208,269,186,273,172"/>
                        <area onfocus="this.blur()" class="huanan" href="javascript:;" shape="poly" coords="260,249,284,268,241,284,240,293,246,298,233,313,226,307,227,298,235,289,228,280,201,272,204,263,196,256,226,248,234,250,245,259"/>
                        <area onfocus="this.blur()" class="gangaotai" href="javascript:;" shape="poly" coords="325,241,321,275,312,261,315,248"/>
                    </map>
                </div>
                <img class="jumpToP4 next" src="images/xuanjiaxiang.png"/>
            </div>
        </div>
        <div class="swiper-slide stop-swiping">
            <div class="bg ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0s">
                <img class="bg" src="images/page4.jpg"/>
                <img class="prev" src="images/prev.png"/>
                <div class="techan" id="techan">
                </div>
                <div class="pageContent">
                    <div class="inputContain">
                        <div class="input">
                            <img class="input_back" src="images/input.png"/>
                            <input class="name" id="name" placeholder="请输入名字"/>
                            <input class="comefrom" id="comefrom" placeholder="请输入来自哪里"/>
                        </div>
                    </div>
                    <ul class="techan_btns" id="techan_btns">
                    </ul>
                </div>
            </div>
        </div>
        <div class="swiper-slide stop-swiping">
            <div class="bg page5" id="capture">
                <img class="bg" id="block" src="images/huadong_back.jpg"/>
                <div class="techan">
                </div>
                <div class="pageContent">
                    <div class="inputContain">
                        <div class="input">
                            <img class="input_back" src="images/input.png"/>
                            <span class="name"></span><span class="comefrom"></span>
                        </div>
                    </div>
                <ul class="techan_btns">
                </ul>
                    <ul class="actions">
                        <li class="btn_share" id="share">
                            <img class="share" src="images/btn_share.png"/>
                        </li>
                        <li class="btn_save" id="save">
                            <img class="save" src="images/btn_save.png"/>
                        </li>
                    </ul>
                </div>
            </div>
            <img class="bg" id="share_back" src="images/share_back.png" style="display: none"/>
        </div>
    </div>

    <div class="swiper-pagination"></div>
    <img src="images/share_bottoms.jpg"/>
</div>
<div id="Img"></div>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="dist/swiper-4.4.6/swiper.min.js"></script>
<script src="dist/swiper-4.4.6/swiper.animate1.0.3.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/canvas2image.js"></script>
<script>
    var all_list=[
        {block:'huadong',list:[{id:'haixian',text:'天海藏环球海鲜礼盒'},{id:'huotui',text:'金华火腿'},{id:'dazhaxie',text:'阳澄湖大闸蟹'},{id:'longjing',text:'西湖龙井'},{id:'badayang',text:'上海特产礼盒 八大样'},{id:'jinjunmei',text:'润虎 茶叶 金骏眉'}]},
        {block:'dongbei',list:[{id:'xiangmi',text:'稻花香米'},{id:'hongchang',text:'秋林红肠'},{id:'tang',text:'不老林糖'},{id:'renshen',text:'人参'},{id:'lanmei',text:'蓝莓果干'},{id:'xuemi',text:'椴树雪蜜'}]},
        {block:'gangaotai',list:[{id:'yitonghaixian',text:'一统海鲜大礼包'},{id:'dongdingwulong',text:'冻顶乌龙'},{id:'fenglisu',text:'葡韵手信 凤梨酥'},{id:'gaoshancha',text:'高山茶'},{id:'lanfangyuan',text:'兰芳园'},{id:'niurouwan',text:'牛肉丸'}]},
        {block:'huabei',list:[{id:'lvrou',text:'闹汤驴肉'},{id:'kaoya',text:'全聚德烤鸭'},{id:'mahua',text:'十八街麻花'},{id:'beibingyang',text:'北冰洋'},{id:'goubuli',text:'狗不理包子'},{id:'daoxiangcun',text:'稻香村饼干'}]},
        {block:'huanan',list:[{id:'guilinggao',text:'龟苓膏'},{id:'lawei',text:'腊味俩好'},{id:'chashao',text:'叉烧'},{id:'gaodian',text:'咀香园正宗广式糕点'},{id:'yezitang',text:'特制椰子糖'},{id:'yezhi',text:'椰树牌椰汁'}]},
        {block:'huazhong',list:[{id:'zuhe',text:'湖北特产十组合'},{id:'huimian',text:'河南烩面'},{id:'zhouheiya',text:'好多多多鸭'},{id:'yangzatang',text:'滋补羊杂汤'},{id:'wuchangyu',text:'武昌鱼'},{id:'shaoji',text:'道口烧鸡'}]},
        {block:'xibei',list:[{id:'lamian',text:'兰州牛肉拉面'},{id:'maoniu',text:'藏牦牛肉干'},{id:'sanpaotai',text:'三泡台'},{id:'badanmu',text:'巴旦木'},{id:'putaogan',text:'无核白葡萄干'},{id:'laozao',text:'醪糟'}]},
        {block:'xinan',list:[{id:'xianhuabing',text:'鲜花饼'},{id:'huoguodiliao',text:'火锅底料'},{id:'shaojigong',text:'烧鸡公'},{id:'dandanmian',text:'四川担担面'},{id:'fengzhua',text:'泡椒风爪'},{id:'youjicongjun',text:'油鸡枞菌'}]},
    ]
    var block='huadong';
    var techan_list=[];//特产列表
    var list=[];//选中特产列表
    var name='';//名字
    var comfrom='';//来自哪里
    var H = $(window).height();
    var W = $(window).width();

    $(document).ready(function () {
        var mySwiper = new Swiper('.swiper-container', {
            effect : 'fade',
            direction: 'vertical', // 垂直切换选项
            //loop: true, // 循环模式选项
            //allowSlidePrev : false,
            noSwiping : true,
            noSwipingClass : 'stop-swiping',
            //pagination: {el: '.swiper-pagination'},// 分页器
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //第1页切换结束即第2页，动画播放完之后跳转下一页
                    if(this.activeIndex==1){
                        setTimeout(function () {
                            mySwiper.slideNext();
                            },17000)
                    }
                    //第4页点击事件
                    if(this.activeIndex==3){
                        $('#techan_btns li').click(function(){
                            var el = this.className;
                            var img_el = el.substr(4);

                            if(!$(this).hasClass('active')&&list.length<4) {
                                $(this).addClass('active');
                                $(this).find('img').attr('src', 'images/btn_active.png');
                                $('#techan .' + img_el).attr('src', 'images/' + img_el + '_active.png');
                                list.push(el);
                            }else{
                                $(this).removeClass('active');
                                el=this.className;
                                img_el = el.substr(4);
                                $(this).find('img').attr('src', 'images/btn.png');
                                $('#techan .' + img_el).attr('src', 'images/' + img_el + '.png');
                                var index=list.indexOf(el);
                                if(index!=-1){
                                    list.splice(index,1);
                                }
                            }

                            //当选到第4个特产时
                            if(list.length==4){
                                name=$('#name').val();
                                comefrom=$('#comefrom').val();
                                if(name==''&&comefrom==''){
                                    alert('请输入名字以及来自哪里！')
                                }else if(comefrom==''){
                                    alert('请输入来自哪里！')
                                }else if(name==''){
                                    alert('请输入名字！')
                                }else {
                                    $('.page5 .techan_btns li').find('img').attr('src','images/btn_selected.png');
                                    for(var i=0;i<list.length;i++){
                                        var btns=list[i];
                                        var item=btns.substr(4);
                                        //显示选中按钮样式
                                        $('.page5 .techan_btns').find('.'+btns).attr('style','display:flex');
                                        if(H<600){
                                             $('.page5 .techan_btns').find('.'+btns).attr('style','display:flex;margin-bottom:0.1rem');
                                        }
                                        //添加特产颜色
                                        $('.page5 .techan').find('.'+item).attr('src','images/'+item+'_active.png');
                                    }
                                    $('.page5 .name').html(name);
                                    $('.page5 .comefrom').html(comefrom);
                                    mySwiper.slideNext();
                                    //console.log(name + ',' + comefrom)
                                }
                            }
                            console.log(list)
                        })
                    }
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                },
            }
        });

        if(H<600){
           $('.pageContent').attr('style','bottom:0;');
           $('.techan_btns li').attr('style','margin-bottom:0.1rem;');
           $('.actions li').attr('style','margin-bottom:0.1rem;');
        }

        //点击跳转下一页
        $('.jumpToP2').click(function () {
            mySwiper.slideNext();
        })
        //点击跳转上一页
        $(".prev").click(function(){
            mySwiper.slidePrev();
            $('#name').val('');
            $('#comefrom').val('');
            list=[];
            $('.jumpToP4').attr('src','images/xuanjiaxiang.png');
        })
        //点击切换区域
        selectMap('dongbei');
        selectMap('huabei');
        selectMap('xibei');
        selectMap('xinan');
        selectMap('huazhong');
        selectMap('huadong');
        selectMap('huanan');
        selectMap('gangaotai');

        //点击"寻找家乡"初始化特产列表
        $('.jumpToP4').click(function () {
            $(this).attr('src','images/xuanjiaxiang_active.png');
            var techan_data=all_list.filter(function (item) {
                if(item.block==block){
                    return item;
                }
            })
            setTimeout(function(){
                techan_list=techan_data[0].list;
                $('.techan').html('');
                $('.techan_btns').html('');
                for(var i=0;i<techan_list.length;i++){
                    var item='<img class="'+techan_list[i].id+'" src="images/'+techan_list[i].id+'.png"/>';
                    var btn_item='<li class="btn_'+techan_list[i].id+'"><text>'+techan_list[i].text+'</text><img class="btn" src="images/btn.png"/></li>'
                    $('.techan').append(item);
                    $('.techan_btns').prepend(btn_item);
                }
                mySwiper.slideNext();
            },700)

        })


        //保存图片
        $('#save').click(function(){
            $('#share').attr('style','display:none');
            $('#save').attr('style','display:none');
            if(!$("#canvas").length) {
                html2canvas(document.querySelector("#capture"),{
                    scale: 2,
                    width:W,
                    height:H
                }).then(canvas => {
                    document.body.appendChild(canvas);
                    canvas.setAttribute('id','canvas');
                    canvas.setAttribute('style','position:absolute;top:0;width:'+W+'px;height:'+H+'px;');

                    //canvas绘图
                    var ctx = canvas.getContext("2d");
                    var imgBottom = new Image();
                    imgBottom.src = 'images/share_bottoms.jpg';
                    ctx.drawImage(imgBottom, 0, H*1178/1334*2, W*2, H *156/1334*2);

                    var imgNode= document.getElementById('Img');
                    var img = Canvas2Image.convertToImage(canvas, W*2, H*2);
                    imgNode.setAttribute('style','position:absolute;top:0;width:'+W+'px;height:'+H+'px;overflow:hidden');
                    imgNode.appendChild(img);
                    img.setAttribute('style','width:100%; z-index:999; position:relative;top:0;');

                    canvas.addEventListener('click',function(){
                        console.log('点击到了canvas')
                    })
                    img.addEventListener('click',function(){
                        console.log('点击到了图片')
                        imgNode.style.display='none';
                        document.getElementById("canvas").style.display = "none";
                        document.getElementById("share").setAttribute('style', 'display:block');
                        document.getElementById("save").setAttribute('style', 'display:block');
                    })
                });
            }else{
                $('#Img').attr('style','position:absolute;top:0;width:'+W+'px;height:'+H+'px;overflow:hidden');
                $('#Img').click(function(){
                    $('#Img').hide();
                    $('#canvas').hide();
                    $('#share').attr('style','display:block');
                    $('#save').attr('style','display:block');
                })
            }

        })

        //分享提示
        $('#share').click(function(){
            $('#share_back').attr('style','display:block;z-index:11');
        })
        $('#share_back').click(function(){
            $('#share_back').attr('style','display:none;z-index:-1');
        })

    })

    //选择区域
    function selectMap(area) {
        $('#mapArea').find('.' + area).click(function () {
            $('#map').attr('src', 'images/' + area + '.png');
            block=area;
            $('#block').attr('src', 'images/' + area + '_back.jpg');
        })
    }

</script>

</body>

</html>
